<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="19">
        <div id="box">
          <el-row :gutter="15">
            <el-col :span="4">
              <el-input size="small" placeholder="请输入筛选的班级名称"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input size="small" placeholder="请输入筛选的教学进度计划名称"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input size="small" placeholder="请输入筛选的考试名称"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
              <el-button size="small" type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加考试</el-button>
              <el-dialog :visible.sync="dialogFormVisible" title="添加考试">
                <el-form :model="addExam" ref="exam">
                  <el-row>
                    <el-col :span="20">
                      <div class="addExam1">
                        <el-row>
                          <el-col :span="24">
                            <el-form-item prop="examType">
                              <el-row>
                                <el-col :span="3">
                                  <div class="exam">
                                  <span style="font-size: 0.9rem; float: left;">考试类型:</span>
                                  </div>
                                </el-col>
                                <el-col :span="19">
                                  <div>
                                    <el-radio-group size="mini" v-model="addExam.examType" style="float: left; margin-left: 0.8rem;">
                                      <el-radio-button :label="1" @click.native="display">普通考试</el-radio-button>
                                      <el-radio-button :label="2" @click.native="display">认证考试</el-radio-button>
                                      <el-radio-button :label="3" @click.native="hide">高校公开考试</el-radio-button>
                                      <el-radio-button :label="4" @click.native="hide">k12公开考试</el-radio-button>
                                    </el-radio-group>
                                  </div>
                                </el-col>
                              </el-row>
                            </el-form-item>
                            <el-form-item v-if="show" prop="clazz">
                              <el-row>
                                <el-col :span="3">
                                  <span style="font-size: 0.9rem; float: left;">所属班级:</span>
                                </el-col>
                                <el-col :span="19">
                                  <div>
                                    <el-select style="width: 100%; margin-left: 0.8rem;" size="small" v-model="addExam.clazz" slot="prepend" placeholder="请选择" @click.native="getSelfClass">
                                      <el-option v-for="item in classList" :value="item.clazz.name" :key="item.classId">{{item.clazz.name}}</el-option>
                                    </el-select>
                                  </div>
                                </el-col>
                              </el-row>
                            </el-form-item>
                            <el-form-item v-if="show">
                              <el-row>
                                <el-col :span="3">
                                  <span style="font-size: 0.9rem; float: left;">教学进度计划:</span>
                                </el-col>
                                <el-col :span="19">
                                  <div>
                                    <el-select style="width: 100%; margin-left: 0.8rem;" size="small" v-model="schedule" slot="prepend" placeholder="请选择">
                                      <el-option label="餐厅名" value="1"></el-option>
                                      <el-option label="订单号" value="2"></el-option>
                                      <el-option label="用户电话" value="3"></el-option>
                                    </el-select>
                                  </div>
                                </el-col>
                              </el-row>
                            </el-form-item>
                            <el-form-item v-if="show">
                              <el-row>
                                <el-col :span="3">
                                  <span style="font-size: 0.9rem; float: left;">课次:</span>
                                </el-col>
                                <el-col :span="19">
                                  <div>
                                    <el-select style="width: 100%; margin-left: 0.8rem;" size="small" width="100%" v-model="classtimes" slot="prepend" placeholder="请选择">
                                      <el-option label="餐厅名" value="1"></el-option>
                                      <el-option label="订单号" value="2"></el-option>
                                      <el-option label="用户电话" value="3"></el-option>
                                    </el-select>
                                  </div>
                                </el-col>
                              </el-row>
                            </el-form-item>
                            <el-form-item>
                              <el-col :span="3">
                                <small style="margin-left: -2.5rem;">考试名称:</small>
                              </el-col>
                              <el-col :span="19">
                                <el-input style="margin-left: 0.8rem;" size="small" v-model="examname" placeholder="请输入内容"></el-input>
                              </el-col>
                            </el-form-item>
                            <el-form-item>
                              <el-col :span="3">
                                <small style="font-size: 0.9rem; float: left;">考试时间</small>
                              </el-col>
                              <el-col :span="19">
                                <div class="block">
                                  <el-date-picker size="small" type="daterange" style="width: 100%; margin-left: 0.8rem;"></el-date-picker>
                                  <!-- <el-date-picker v-model="value1" type="daterange"></el-date-picker> -->
                                </div>
                              </el-col>
                            </el-form-item>
                            <el-form-item>
                              <el-row>
                                <el-col :span="3">
                                  <span style="font-size: 0.9rem; float: left;">提交试卷时间</span>
                                </el-col>
                                <el-col :span="19">
                                  <div>
                                    <el-radio-group v-model="Submission" size="mini" style="float: left; margin-top: 0.5rem; margin-left: 0.8rem;">
                                      <el-radio-button label="可以立即提交"></el-radio-button>
                                      <el-radio-button label="等待时间结束"></el-radio-button>
                                    </el-radio-group>
                                  </div>
                                </el-col>
                              </el-row>
                            </el-form-item>
                            <el-form-item>
                              <el-row>
                                <el-col :span="3">
                                  <span style="font-size: 0.9rem; float: left;">公布答案时间</span>
                                </el-col>
                                <el-col :span="19">
                                  <div>
                                    <el-radio-group v-model="Publish" size="mini" style="float: left; margin-top: 0.5rem; margin-left: 0.8rem;">
                                      <el-radio-button label="试卷提交之后"></el-radio-button>
                                      <el-radio-button label="考试结束之后"></el-radio-button>
                                    </el-radio-group>
                                  </div>
                                </el-col>
                              </el-row>
                            </el-form-item>
                            <el-form-item>
                              <el-row>
                                <el-col :span="3">
                                  <span style="font-size: 0.9rem; float: left;">超时提交</span>
                                </el-col>
                                <el-col :span="19">
                                  <div>
                                    <el-radio-group v-model="overtime" size="mini" style="float: left; margin-top: 0.5rem; margin-left: 0.8rem;">
                                      <el-radio-button label="可以"></el-radio-button>
                                      <el-radio-button label="不可以"></el-radio-button>
                                    </el-radio-group>
                                  </div>
                                </el-col>
                              </el-row>
                            </el-form-item>
                            <el-form-item>
                              <el-row type="flex" justify="center">
                                <el-col :span="24">
                                   <el-button type="primary" size="mini">提交</el-button>
                                   <el-button plain size="mini">取消</el-button>
                                </el-col>
                              </el-row>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                  </el-row>
                </el-form>
              </el-dialog>
            </el-col>
          </el-row>
          <el-row style="margin-top: 1.8rem;">
            <el-col :span="1">
              <div class="Header-i"><i class="fa fa-tag" aria-hidden="true"></i></div>
            </el-col>
            <el-col :span="2"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
            <el-col :span="2"><div class="Header-text"><span>数据列表</span></div></el-col>
            <el-col :span="19"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
          </el-row>
          <el-row>
            <el-table empty-text="暂无数据" :header-cell-style="{background: '#f8f8f9'}" :data="tableData" border style="width: 100%; font-size: 1rem;">
              <el-table-column fixed="left" prop="date" label="考试名称" width="150"></el-table-column>
              <el-table-column  prop="name" label="班级名称" width="120"></el-table-column>
              <el-table-column  prop="name" label="教学进度计划" width="120"></el-table-column>
              <el-table-column  prop="name" label="考试时间" width="120"></el-table-column>
              <el-table-column  prop="name" label="考试类型" width="120"></el-table-column>
              <el-table-column  prop="name" label="持续时间" width="120"></el-table-column>
              <el-table-column  prop="name" label="考试状态" width="120"></el-table-column>
              <el-table-column  prop="name" label="更新人" width="120"></el-table-column>
              <el-table-column  prop="name" label="更新时间" width="120"></el-table-column>
              <el-table-column fixed="right" label="操作1" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="dialogFormVisible = true">编辑</el-button>
                  <el-button type="text" style="color: red;" size="small">删除</el-button>
                  </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作2" width="200">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="details = true">详情</el-button>
                  <el-dialog class="dialog" :visible.sync="details" title="111" width="80%" :append-to-body='true'>
                    <el-row>
                      <div class="divider">
                        <el-divider width="100%"></el-divider>
                      </div>
                    </el-row>
                    <el-row :gutter="15">
                      <el-col :span="4">
                        <el-input size="small" placeholder="请输入筛选的班级名称"></el-input>
                      </el-col>
                      <el-col :span="4">
                        <el-input size="small" placeholder="请输入筛选的教学进度计划名称"></el-input>
                      </el-col>
                      <el-col :span="4">
                        <el-input size="small" placeholder="请输入筛选的考试名称"></el-input>
                      </el-col>
                      <el-col :span="5">
                        <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
                        <el-button size="small" type="primary" icon="el-icon-plus">添加考试</el-button>
                      </el-col>
                    </el-row>
                    <el-row style="margin-top: 1.8rem; margin-bottom: 1rem;">
                      <el-col :span="1">
                        <div><i class="fa fa-tag" aria-hidden="true"></i></div>
                      </el-col>
                      <el-col :span="2"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
                      <el-col :span="2"><div style="text-align: center;"><span>数据列表</span></div></el-col>
                      <el-col :span="19"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
                    </el-row>
                    <el-row>
                      <el-table empty-text="暂无数据" :header-cell-style="{background: '#f8f8f9'}" :data="tableData" border style="width: 100%; font-size: 1rem;">
                        <el-table-column  prop="name" label="学生名称"></el-table-column>
                        <el-table-column  prop="name" label="班级名称"></el-table-column>
                        <el-table-column  prop="name" label="考试名称"></el-table-column>
                        <el-table-column  prop="name" label="考试分数"></el-table-column>
                        <el-table-column  prop="name" label="考试等级"></el-table-column>
                        <el-table-column  prop="name" label="操作"></el-table-column>
                      </el-table>
                    </el-row>
                    <el-row type="flex" justify="center">
                      <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                      </el-pagination>
                    </el-row>
                  </el-dialog>
                  <el-button type="text" size="small">生成试卷</el-button>
                  <el-button type="text" size="small" @click="ExaminationRules = true">考试规则</el-button>
                  <el-dialog class="dialog" :visible.sync="ExaminationRules" :append-to-body="true" width="80%" title="111">
                    <el-row>
                      <div class="divider">
                        <el-divider width="100%"></el-divider>
                      </div>
                    </el-row>
                    <el-row>
                      <el-button size="small" type="primary" icon="el-icon-plus" @click="addExamination = true">添加考试</el-button>
                      <el-dialog class="dialog" :visible.sync="addExamination" append-to-body title="添加考试">
                        <el-row>
                          <div class="divider">
                            <el-divider width="100%"></el-divider>
                          </div>
                        </el-row>
                      </el-dialog>
                    </el-row>
                    <el-row style="margin-top: 1.8rem; margin-bottom: 1rem;">
                      <el-col :span="1">
                        <div><i class="fa fa-tag" aria-hidden="true"></i></div>
                      </el-col>
                      <el-col :span="2"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
                      <el-col :span="2"><div style="text-align: center;"><span>数据列表</span></div></el-col>
                      <el-col :span="19"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
                    </el-row>
                    <el-row>
                      <el-table empty-text="暂无数据" :header-cell-style="{background: '#f8f8f9'}" :data="tableData" border style="width: 100%; font-size: 1rem;">
                        <el-table-column  prop="name" label="考试规则"></el-table-column>
                        <el-table-column  prop="name" label="包含课程"></el-table-column>
                        <el-table-column  prop="name" label="考点数量"></el-table-column>
                        <el-table-column  prop="name" label="考生数量"></el-table-column>
                        <el-table-column  prop="name" label="试题分值"></el-table-column>
                        <el-table-column  prop="name" label="试题难度(低至高)"></el-table-column>
                        <el-table-column  prop="name" label="操作"></el-table-column>
                      </el-table>
                    </el-row>
                    <el-row type="flex" justify="center">
                      <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                      </el-pagination>
                    </el-row>
                  </el-dialog>
                  </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row type="flex" justify="center">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],
      dialogFormVisible: false,
      details: false,
      active: {
        getSelfClass: 'LearningPlatform/manager/class/getSelfClass'
      },
      addExam: {
        examType: '1',
        clazz: ''
      },
      classList: [],
      schedule: '',
      classtimes: '',
      examname: '',
      Submission: '可以立即提交',
      Publish: '试卷提交之后',
      overtime: '可以',
      show: true,
      currentPage4: 1,
      ExaminationRules: false,
      addExamination: false
    }
  },
  components: {

  },
  methods: {
    display () {
      this.show = true
    },
    hide () {
      this.show = false
    },
    getSelfClass () {
      http.xhrGet(this, this.active.getSelfClass, null, (res) => {
        this.classList = res.data.data.list
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style>
#box {
  background-color: #fff;
  padding: 1.5rem;
}
#box .Header-i {
  width: 3rem;
}
#box .Header-i i {
  font-size: 2.5rem;
  color: #C8C8C8;
}
#box .Header-text {
  font-size: 1.406rem;
}
.divider /deep/ .el-divider {
  margin: 0;
  margin-bottom: 1rem;
}
.dialog /deep/ .el-dialog__body {
  padding-top: 0;
}
</style>
